import { Component, OnInit } from '@angular/core';
@Component({
    selector: `inspection-one-key-config`,
    styleUrls: ["./components.less"],
    template: `
        <nz-tabset>
                <nz-tab nzTitle='配置'>
                    <div>
                        <button nz-button nzType='primary' (click)="modal_visable_config = true">新增配置</button>
                    </div>
                        <nz-table #basicTable [nzData]="mock_data_config" nzSize="middle"  [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzPageSize]="5">
                        <thead>
                            <tr>
                                <th>计划名称</th>
                                <th>关联设备</th>
                                <th nzAlign="center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of basicTable.data">
                                <td>{{ data.planName }}</td>
                                <td>{{ data.devices.join("，") }}</td>
                                <td class='option-td' nzAlign="center">
                                    <button nz-button nzType="primary" (click)="modal_visable_config = true">一键顺控</button>
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                </nz-tab>
                <nz-tab nzTitle='历史查询'>
                    <div>
                        <span style="color:'#fff'">选择时间:</span>
                        <nz-range-picker nzMode="month" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker>
                        <button nz-button nzType="primary">查询</button>
                    </div>
                    <nz-table #basicTable1 [nzData]="mock_data_history" nzSize="middle"  [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzPageSize]="5">
                        <thead>
                            <tr>
                                <th>计划名称</th>
                                <th>关联设备</th>
                                <th>执行时间</th>
                                <th>执行结果</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let h_data of basicTable1.data">
                                <td>{{ h_data.planName }}</td>
                                <td>{{ h_data.devices.join("，") }}</td>
                                <td>{{ h_data.runningTime }}</td>
                                <td>{{ h_data.result?"完成":"失败"}}</td>
                            </tr>
                        </tbody>
                    </nz-table>
                </nz-tab>
        </nz-tabset>

        <nz-modal [(nzVisible)]="modal_visable_config" [nzTitle]="modalTitle" (nzOnCancel)="handleCancel_config()" (nzOnOk)="handleOk_config()" [nzWidth]="968">
            <ng-template #modalTitle>新增一键顺控配置</ng-template>
            <ng-container *nzModalContent>
                <div>
                    <div class="create-one-key-bar">
                        <span style="flex-shrink:0;margin-right:'6px'">计划名称:</span>
                        <input nz-input placeholder="给目标起个名字"/>
                    </div>

                    <table style="width:100%" class="create-one-key-table">
                        <tr>
                            <th>设备列表</th>
                            <th>排序</th>
                        </tr>
                        <tr *ngFor="let data of mock_data_create_modal; let i = index">
                            <td>{{data.deviceName}}</td>
                            <td class="option-td"><span (click)="handleMoveUp(i)">↑</span><span (click)="handleMoveDown(i)">↓</span></td>
                        </tr>
                    </table>       
                </div>
            </ng-container>
        </nz-modal>
    `
})


export class OneKeyConfigComponent implements OnInit {
    modal_visable_config: boolean = false
    date: any
    onChange(event):void{
        console.log(event)
    }
    handleCancel_config(): void {
        this.modal_visable_config = false
    }
    handleOk_config(): void {
        this.modal_visable_config = false
    }
    handleMoveUp(index: number): void {
        const souce_array = this.mock_data_create_modal
        if (index > 0) {
            souce_array.splice(index - 1, 1, ...souce_array.splice(index, 1, souce_array[index - 1]))
        }
        this.mock_data_create_modal = souce_array
    }
    handleMoveDown(index: number): void {
        const souce_array = this.mock_data_create_modal
        if (index < souce_array.length - 1) {
            souce_array.splice(index + 1, 1, ...souce_array.splice(index, 1, souce_array[index + 1]))
        }
        this.mock_data_create_modal = souce_array
    }
    mock_data_config = [
        {
            key: '1',
            planName: '测试',
            devices: ['变压器', 'GIS开关柜', '直流柜']
        },
        {
            key: '2',
            planName: '二号线计划1',
            devices: ['GIS开关柜', '直流柜']
        },
        {
            key: '3',
            planName: '三号线计划1',
            devices: ['变压器', 'GIS开关柜', '直流柜']
        },
        {
            key: '4',
            planName: '三号线计划1',
            devices: ['变压器', '直流柜']
        },
    ]
    mock_data_history = [
        {
            key: '1',
            planName: '测试',
            devices: ['变压器', 'GIS开关柜', '直流柜'],
            runningTime: '2020-10-02 09:00',
            result: 1
        },
        {
            key: '2',
            planName: '二号线计划1',
            devices: ['GIS开关柜', '直流柜'],
            runningTime: '2020-10-02 09:00',
            result: 0
        },
        {
            key: '3',
            planName: '三号线计划1',
            devices: ['变压器', 'GIS开关柜', '直流柜'],
            runningTime: '2020-10-02 09:00',
            result: 0
        },
        {
            key: '4',
            planName: '三号线计划1',
            devices: ['变压器', '直流柜'],
            runningTime: '2020-10-02 09:00',
            result: 1
        },
    ]
    mock_data_create_modal = [
        {
            key: "1",
            deviceName: '一号线GIS开关柜'
        },
        {
            key: "2",
            deviceName: '二号线直流柜'
        },
        {
            key: "3",
            deviceName: '三号线变压器'
        },
        {
            key: "4",
            deviceName: '四号线变压器2'
        },
    ]
    ngOnInit(): void {

    }
}